<template>
	<view class="page_box">
		<view class="head_box " style="background-color: #FFFFFF;">
			<yy-custom bgColor="" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">补货审核</block>
			</yy-custom>
		</view>

		<view class="content_box ">
			<!-- <view class="srchFor padding-lr bg-white"><u-search placeholder="搜索关键词" :show-action="false"></u-search></view> -->
			<view class="nav flex  justify-between padding-lr-xl padding-tb bg-white f30 text-black">
				<text class=" flex flex-direction  align-start a" @click="flg(0)"
					:class="sts == 0 ? 'style' : ''">待审</text>
				<text class=" flex flex-direction a align-center" @click="flg(1)"
					:class="sts == 1 ? 'style' : ''">通过</text>
				<text class=" flex flex-direction a align-end" @click="flg(2)"
					:class="sts == 2 ? 'style' : ''">驳回</text>
			</view>
			<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="lower">
				<block v-if="sts == 0">
					<view class="info margin-top bg-white padding flex-direction" v-for="(item, index1) in GetlistFrom"
						:key="index1">
						<view class="flex justify-between align-center">
							<view class="flex align-center">
								<image :src="item.user.headimgurl" mode="aspectFill"
									style="width: 60rpx; height: 60rpx;" class="round bg-gradual-green"></image>
								<text class="f30 text-black margin-left-sm">{{item.user.nickname}}</text>
								<view class="flex align-center justify-around info-li margin-left-sm">
									<text class="cuIcon-favorfill margin-right-xs" style="color: #fbb03b;"></text>
									<text class="f26 text-white">{{item.user.level}}</text>
								</view>
								<text class="f26 text-white margin-left" @tap="phoneFrom(item.user.tel)" style="color: #000;">{{item.user.tel}}</text>
							</view>
							<text class="text-gray f24">{{item.createDt}}</text>
						</view>

						<view class="flex align-center justify-between">
							<view class="flex-direction flex ">
								<view class="goods padding-tb-sm solid-bottom flex " v-for="(item1, id) in item.order"
									:key="id">
									<view class="padding-xs flex align-center justify-center"
										style="width: 100rpx; height: 100rpx;">
										<image :src="item1.commodityImg" mode="aspectFill" class="bg-gradual-orange "
											style="width: 81rpx; height: 69rpx;"></image>
									</view>
									<view class="flex flex-direction justify-around margin-left-lg">
										<text class="f28 text-black">液态全活菌（{{item1.commodityType}}）</text>
										<text class="f26 text-gray">补货数量(箱)：{{item1.num}}</text>
									</view>
								</view>
							</view>
							<view class="flex flex-direction  justify-around">
								<button class='cu-btn btn' @tap="addtong(item.orderId, 1)">通过</button>
								<button class='cu-btn btn-one margin-top' @tap="addtong(item.orderId, 2)">驳回</button>

							</view>
						</view>
					</view>
				</block>
				<block v-if="sts == 1">
					<view class="info margin-top bg-white padding flex-direction" v-for="(item, index1) in GetlistFrom"
						:key="index1">
						<view class="flex justify-between align-center">
							<view class="flex align-center">
								<image :src="item.user.headimgurl" mode="aspectFill"
									style="width: 60rpx; height: 60rpx;" class="round bg-gradual-green"></image>
								<text class="f30 text-black margin-left-sm">{{item.user.nickname}}</text>
								<view class="flex align-center justify-around info-li margin-left-sm">
									<text class="cuIcon-favorfill margin-right-xs" style="color: #fbb03b;"></text>
									<text class="f26 text-white">{{item.user.level}}</text>
								</view>
							</view>
							<text class="text-gray f24">{{item.createDt}}</text>
						</view>

						<view class="flex align-center justify-between">
							<view class="flex-direction flex ">
								<view class="goods padding-tb-sm solid-bottom flex "
									v-for="(item1, index) in item.order" :key="index">
									<view class="padding-xs flex align-center justify-center"
										style="width: 100rpx; height: 100rpx;">
										<image :src="item1.commodityImg" mode="aspectFill" class="bg-gradual-orange "
											style="width: 81rpx; height: 69rpx;"></image>
									</view>
									<view class="flex flex-direction justify-around margin-left-lg">
										<text class="f28 text-black">液态全活菌（{{item1.commodityType}}）</text>
										<text class="f26 text-gray">补货数量(箱)：{{item1.num}}</text>
									</view>
								</view>
							</view>
							<text class="text-yellow f28" style="width: 100rpx;">已通过</text>
						</view>
					</view>
				</block>
				<block v-if="sts == 2">
					<view class="info margin-top bg-white padding flex-direction" v-for="(item, index1) in GetlistFrom"
						:key="index1">
						<view class="flex justify-between align-center">
							<view class="flex align-center">
								<image :src="item.user.headimgurl" mode="aspectFill"
									style="width: 60rpx; height: 60rpx;" class="round bg-gradual-green"></image>
								<text class="f30 text-black margin-left-sm">{{item.user.nickname}}</text>
								<view class="flex align-center justify-around info-li margin-left-sm">
									<text class="cuIcon-favorfill margin-right-xs" style="color: #fbb03b;"></text>
									<text class="f26 text-white">{{item.user.level}}</text>
								</view>
							</view>
							<text class="text-gray f24">{{item.createDt}}</text>
						</view>

						<view class="flex align-center justify-between">
							<view class="flex-direction flex ">
								<view class="goods padding-tb-sm solid-bottom flex "
									v-for="(item1, index) in item.order" :key="index">
									<view class="padding-xs flex align-center justify-center"
										style="width: 100rpx; height: 100rpx;">
										<image :src="item1.commodityImg" mode="aspectFill" class="bg-gradual-orange "
											style="width: 81rpx; height: 69rpx;"></image>
									</view>
									<view class="flex flex-direction justify-around margin-left-lg">
										<text class="f28 text-black">液态全活菌（{{item1.commodityType}}）</text>
										<text class="f26 text-gray">补货数量(箱)：{{item1.num}}</text>
									</view>
								</view>
							</view>
							<text class="text-grey f28" style="width: 100rpx;">已驳回</text>
						</view>
					</view>
				</block>
			</scroll-view>


		</view>

		<!-- 提示模态框 -->
		<u-modal v-model="show1" :show-cancel-button="true" @confirm="add" :content="content"></u-modal>

		<view class="foot_box"></view>
		<!-- 登录提示 -->
		<yy-login v-if="false"></yy-login>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				sts: 0,
				show1: false,
				orderId: '',
				setNum: 0, // 通过驳回选择
				GetlistFrom: [],
				content: '确定你的选择!',
			};
		},
		onShow() {},
		onLoad(e) {
			this.storack()
		},
		methods: {
			jump(url) {
				uni.navigateTo({
					url
				});
			},

			flg(e) {
				this.sts = e;
				this.storack()
			},

			async storack() {
				const res = await this.$u.get('/order/checkList', {
					status: this.sts,
					userId: uni.getStorageSync('data').id,
				}, {});
				if (res.code == 0) {
					this.GetlistFrom = res.data
				}
			},

			lower() {

			},

			async add() {
				const res = await this.$u.get('/order/check', {
					orderId: this.orderId,
					status: this.setNum,
				}, {});
				if (res.code == 0) {
					this.storack()
					return this.$refs.uToast.show({
						title: res.msg,
						type: 'none'
					});
				} else {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'none'
					});

				}

			},

			addtong(id, index) {
				this.orderId = id
				this.show1 = true
				this.setNum = index
				console.log(index)
			},
			
			phoneFrom(tel) {
				uni.makePhoneCall({
				    phoneNumber: tel //仅为示例
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page_box {
		background-color: #f7f7f7;
		margin-top: -5rpx;

		.scroll-y {
			height: calc(100vh - 106px);
		}

		.content_box {
			.nav {
				.style::after {
					content: '';
					width: 50rpx;
					height: 6rpx;
					background: #fbb03b;
					border-radius: 3rpx;
					margin-top: 20rpx;
				}

				.a {
					width: 200rpx;
				}

				.style {
					font-weight: 600;
				}
			}

			.info {
				.info-li {
					width: 80rpx;
					height: 30rpx;
					background: linear-gradient(139deg, #393b56, #4f4f62);
					border-radius: 10rpx;
				}
			}

			.btn {
				width: 140rpx;
				height: 50rpx;
				background: #FBB03B;
				border-radius: 25rpx;

				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}

			.btn-one {
				width: 140rpx;
				height: 50rpx;
				background: #FFE9C7;
				border-radius: 25rpx;

				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FBB03B;
			}
		}
	}
</style>
